<template>
  <div class="__layout-header">
    <div>{{ formattedTime }}</div>
    <div class="avatar-container" @click.stop="togglePopup">
      <img src="@/assets/image/layout/avatar.jpg" class="avatar" />
      <button class="toggle-icon" aria-label="切换菜单">
        <ArrowDown v-if="!isExpanded" />
        <ArrowUp v-if="isExpanded" />
      </button>

      <!-- 弹框组件 -->
      <div
        v-if="isExpanded"
        class="popup-menu"
        :class="{ show: isExpanded }"
        @mouseenter="clearAutoCloseTimer"
        @mouseleave="startAutoCloseTimer"
      >
        <ul>
          <li class="popup-item">个人中心</li>
          <li class="popup-item">设置</li>
          <li class="popup-item text-danger">退出登录</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNow, useDateFormat } from '@vueuse/core'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { ref, onBeforeUnmount } from 'vue'

// 时间格式化
const now = useNow({ interval: 1000 })
const formattedTime = useDateFormat(now, 'YYYY年MM月DD日 dddd HH:mm:ss')

// 控制图标和弹框的显示状态
const isExpanded = ref(false)
// 自动关闭计时器
let autoCloseTimer: number | null = null

// 切换弹框显示/隐藏
const togglePopup = () => {
  isExpanded.value = !isExpanded.value

  // 如果打开了弹框，启动自动关闭计时器
  if (isExpanded.value) {
    startAutoCloseTimer()
  } else {
    clearAutoCloseTimer()
  }
}

// 启动自动关闭计时器（3秒后自动关闭）
const startAutoCloseTimer = () => {
  // 清除已有的计时器
  clearAutoCloseTimer()

  // 3000毫秒（3秒）后自动关闭
  autoCloseTimer = window.setTimeout(() => {
    isExpanded.value = false
  }, 3000)
}

// 清除自动关闭计时器
const clearAutoCloseTimer = () => {
  if (autoCloseTimer) {
    clearTimeout(autoCloseTimer)
    autoCloseTimer = null
  }
}

// 组件卸载前清除计时器，防止内存泄漏
onBeforeUnmount(() => {
  clearAutoCloseTimer()
})
</script>

<style lang="scss" scoped>
/* 右上头部栏 */
.__layout-header {
  height: 60px; /* 固定高度 */
  flex-shrink: 0; /* 不压缩 */
  padding: 0 16px;
  color: #35404f;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  position: relative; /* 为弹框提供定位参考 */
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 8px; /* 头像和图标之间的间距 */
  cursor: pointer;
  position: relative; /* 弹框相对于此容器定位 */
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.05);
  }
}

.toggle-icon {
  background: none;
  border: none;
  color: #35404f;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #1890ff; /* 悬停时变色 */
  }

  svg {
    width: 18px;
    height: 18px;
  }
}

/* 弹框样式 */
.popup-menu {
  position: absolute;
  top: 100%; /* 位于容器正下方 */
  right: 0;
  min-width: 160px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
  padding: 8px 0;
  z-index: 100; /* 确保弹框在其他内容上方 */
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: all 0.2s ease;

  &.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .popup-item {
    padding: 10px 16px;
    color: #35404f;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #f5f5f5;
    }
  }

  .text-danger {
    color: #ff4d4f;
  }
}
</style>
